<template>
  <div>
    <audio controls="controls" ref="mySummaryAudio" preload="auto" loop hidden="true">
      <source src="../../static/audio/1.mp3" />
    </audio>
    <el-row :gutter="20">
      <el-col :span="13" style="margin-right:3%">
        <div class="imgcontent">
          <p class="sbname pmzd-font">{{picname}}</p>
          <div id="div_picsign"></div>
        </div>

        <div>
          <swiper
            ref="mySwiper"
            class="swiImgs"
            :options="swiperOption"
            style="height:100px;width:100%;padding:0 50px"
          >
            <swiper-slide v-for="item in imgList" :key="item.id" class="item">
              <img
                :src="item.imgpath"
                height="100%"
                @click="changeselect2(item)"
                class="imglist"
                :class="picname==item.regionName?'choosedpic':''"
              />
            </swiper-slide>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      </el-col>
      <el-col :span="10">
        <p class="pmzd-font tabletitle">报警故障</p>
        <el-table
          :data="alarmList"
          style="max-height:650px;min-height:650px;overflow:auto;"
          class="tablecolor"
        >
          <el-table-column property="device.powerDistName" label="配电箱名称"></el-table-column>
          <el-table-column property="device.deviceName" label="设备名称"></el-table-column>
          <el-table-column property="reason" label="故障原因"></el-table-column>
          <el-table-column property="state" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1">警告解除</span>
              <span v-else style="color:red">警告</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin-top:50px;">
      <el-col :span="13" class="tablecolor" style="margin-right:4%">
        <div style="margin-bottom:10px;padding:20px">
          <el-date-picker
            type="date"
            v-model="time"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
          <el-cascader
            expand-trigger="hover"
            :options="codeoptions"
            v-model="zhibiaocodearr"
            @change="handleChange2"
          ></el-cascader>
          <el-button class="btntable2" @click="getzhibiaolist2">查&nbsp;&nbsp;&nbsp;询</el-button>
          <span class="tabletitle pmzd-font" style="float:right">数据分析</span>
        </div>

        <echartsdata3 :namedata="namedata" :zhibiaodata="zhibiaodata" :xvalue="xvalue" v-if="alive"></echartsdata3>
      </el-col>
      <el-col :span="10" class="tablecolor">
        <div style="margin-bottom:10px;padding:20px">
          <el-date-picker
            type="date"
            v-model="time"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
          <el-cascader
            expand-trigger="hover"
            :options="codeoptions"
            v-model="zhibiaocodearr"
            @change="handleChange2"
          ></el-cascader>
          <el-button class="btntable2" @click="getzhibiaolist2">查&nbsp;&nbsp;&nbsp;询</el-button>
          <span class="tabletitle pmzd-font" style="float:right">用电量分析</span>
        </div>

        <echartsdata2 :namedata="namedata" :zhibiaodata="zhibiaodata" :xvalue="xvalue" v-if="alive"></echartsdata2>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echartsdata2 from '~/components/echartsdata2.vue'
import echartsdata3 from '~/components/echartsdata3.vue'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  head: {
    link: [
      { rel: 'stylesheet', href: 'css/bootstrap.min.css' },
      { rel: 'stylesheet', href: 'css/jquery.picsign.css' },
      { rel: 'stylesheet', href: 'css/jquery.webui-popover.min.css' },
      { rel: 'stylesheet', href: 'css/layer.css' }
    ]
  },
  data() {
    return {
      time: '',
      codeoptions: [],
      zhibiaocodearr: [],
      namedata: [],
      zhibiaodata: [],
      ordertamp: [
        '00',
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23'
      ],
      alarmList: [],
      alive: true,
      picname: '设备坐标展示',
      warningdot: '',
      warningtype: '',
      warningvalue: '',
      warningtext: '',
      audiopath: '../../static/audio/1.mp3',
      summaryAudioStatus: 'pause', //pause --当前停止播放状态;play--当前播放状态
      summaryAudioDuration: 1,
      ts: this.newStore(),
      zoom: 1,
      xvalue: [],
      imgList: [],
      choosedpic: '',
      SHjiazai: [],
      src: '',
      left: 0,
      tops: 0,
      flname: '',
      div_picsign: 'div_picsign',
      div_picsign1: 'div_picsign1',
      x0: 0,
      y0: 0,
      x1: 0,
      y1: 0,
      style: '',
      canDrag: false,

      choosedimg: '../../static/img/ystp.png',
      swiperOption: {
        //swiper3
        slidesPerView: 3,
        spaceBetween: 20,
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true,
        //   disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
        //   hiddenClass: 'my-button-hidden'
        // },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      tableData: []
    }
  },
  components: {
    swiper,
    swiperSlide,
    echartsdata2,
    echartsdata3
  },
  mounted() {
    var socket
    if (typeof WebSocket == 'undefined') {
      console.log('您的浏览器不支持WebSocket')
    } else {
      console.log('您的浏览器支持WebSocket')
      //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
      //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");

      var sid = 'htmlclient'
      var nowtime = new Date().getTime()
      sid += nowtime
      socket = new WebSocket('ws://127.0.0.1:8095/websocket/' + sid)
      //	socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
      //打开事件
      socket.onopen = function() {
        console.log('Socket 已打开')
        //socket.send("这是来自客户端的消息" + location.href + new Date());
      }
      //获得消息事件
      socket.onmessage = msg => {
        // console.log('1111', msg.data)
        if (msg.data != '' && msg.data != '连接成功') {
          this.choosedpic = JSON.parse(msg.data).region_id
          this.warningdot = JSON.parse(msg.data).device_id
          // this.warningtype = JSON.parse(msg.data).type
          // this.warningtext = JSON.parse(msg.data).reason
          // this.warningvalue = JSON.parse(msg.data).value
          this.changeselect(this.choosedpic)
          setTimeout(() => {
            // this.$refs.mySummaryAudio.play()
            this.changeurlimg()
          }, 500)

          // this.$notify({
          //   title: this.warningtype,
          //   type: 'warning',
          //   message: this.warningtext + '，当前值：' + this.warningvalue,
          //   duration:0
          // })
        }

        //发现消息进入    开始处理前端触发逻辑
      }
      //关闭事件
      socket.onclose = function() {
        console.log('Socket已关闭')
      }
      //发生了错误事件
      socket.onerror = function() {
        alert('Socket发生了错误')
        //此时可以尝试刷新页面
      }
    }
    this.getimglist()
    this.wheel()

    if (this.$route.query.type == 1) {
      this.choosedpic = this.$route.query.region_id
      this.warningdot = this.$route.query.device_id

      this.changeselect(this.choosedpic)

      setTimeout(() => {
        this.changeurlimg()
      }, 500)
    }
    // this.drawLine()
  },
  created() {
    this.getNowFormatDate()
    this.getcodeList()
    this.getalarmList()
  },
  methods: {
    getalarmList() {
      const req = {
        query: '',
        beginTime: '',
        endTime: '',
        paramCodeId: '',
        pageNum: '0',
        pageSize: '10'
      }
      this.spost(this.ts, '/data/getwarndata', req).then(ts => {
        // console.log(ts.d)
        this.alarmList = ts.d.content
      })
    },
    getzhibiaolist2() {
      this.namedata = []
      this.zhibiaodata = []
      const req = {
        time: this.time,
        hour_num: '24',
        paramCodeId: this.zhibiaocode
      }
      this.spost(this.ts, '/data/getdatatabzhexian', req).then(ts => {
        let a = []
        this.xvalue = []
        let res_a = []
        for (let i = 0; i < ts.d.length; i += 1) {
          if (this.xvalue.indexOf(ts.d[i].device_hour) == -1) {
            this.xvalue.push(ts.d[i].device_hour)
          }

          if (a.indexOf(ts.d[i].device_name) == -1) {
            a.push(ts.d[i].device_name)
          }
        }
        this.namedata = a

        for (let i = 0; i < a.length; i++) {
          let b = []
          for (let j = 0; j < ts.d.length; j++) {
            if (ts.d[j].device_name == a[i]) {
              let d = []
              d[0] = ts.d[j].device_hour
              d[1] = Number(ts.d[j].value)
              b.push(d)
            }
          }

          let res_j = {
            name: a[i],
            type: 'line',
            data: b
          }
          res_a.push(res_j)
        }
        this.zhibiaodata = res_a

        this.reload()
        console.log('res_a', res_a)
      })
    },
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      this.time = year + seperator1 + month + seperator1 + strDate
    },
    reload() {
      this.alive = false
      this.$nextTick(() => {
        this.alive = true
      })
    },
    handleChange2(val) {
      this.zhibiaocode = val[1]
    },
    getcodeList() {
      const req = {
        sup_code_id: '01'
      }
      this.spost(this.ts, '/code/findcodebysupcodeid', req).then(ts => {
        this.codeList = ts.d
        for (let i = 0; i < this.codeList.length; i++) {
          let a = { children: [] }

          a.value = this.codeList[i].codeId
          a.label = this.codeList[i].codeName
          for (let j = 0; j < this.codeList[i].childCode.length; j++) {
            let b = {}
            b.value = this.codeList[i].childCode[j].codeId
            b.label = this.codeList[i].childCode[j].codeName
            a.children.push(b)
          }
          this.codeoptions.push(a)
          console.log('this.codeoptions', this.codeoptions)
        }
        if (this.codeoptions[0].children[0].value) {
          this.zhibiaocodearr = [
            this.codeoptions[0].value,
            this.codeoptions[0].children[0].value
          ]
          this.zhibiaocode = this.codeoptions[0].children[0].value
        }
        this.getzhibiaolist2()
      })
    },
    changeselect2(item) {
      console.log(item)
      this.choosedpic = item.id
      this.picname = item.regionName
      this.changeselect(this.choosedpic)
    },
    play() {
      // alert('hahah')
      this.$refs.mySummaryAudio.play()
    },
    getaudioInfo() {
      // console.log(this.$refs.mySummaryAudio.paused)
      if (this.$refs.mySummaryAudio.paused) {
        this.$refs.mySummaryAudio.play()
      } else {
        this.$refs.mySummaryAudio.pause()
      }

      // setTimeout(() => {
      //     this.$refs.mySummaryAudio.pause()
      // }, 10000);
    },
    getimglist() {
      const res = {}
      this.spost(this.ts, '/region/getall', res).then(ts => {
        // console.log(ts.d)
        this.imgList = ts.d
      })
    },
    changeselect(id) {
      this.destroysign()
      this.getPsigndatas(id)
    },
    getPsigndatas(id) {
      this.SHjiazai = []
      const req = {
        id
      }
      this.spost(this.ts, '/region/getregionbyid', req).then(ts => {
        // console.log('ts.d', ts.d)

        this.src = ts.d.imgpath
        // console.log(this.src)

        for (let i = 0; i < ts.d.devicelist.length; i += 1) {
          // console.log('222', ts.d.devicelist[i])
          let a = { msg: {} }
          a.msg.msg11 = []
          a.left = ts.d.devicelist[i].sideX
          a.top = ts.d.devicelist[i].sideY
          a.msg.pdxname = ts.d.devicelist[i].powerDistName
          a.msg.sbbh = ts.d.devicelist[i].deviceId
          a.msg.sbname = ts.d.devicelist[i].deviceName
          for (
            let j = 0;
            j < ts.d.devicelist[i].deviceConfiglist.length;
            j += 1
          ) {
            let msg11 = {}

            msg11.paramCodeId =
              ts.d.devicelist[i].deviceConfiglist[j].dataCode.codeId

            msg11.select1 =
              ts.d.devicelist[i].deviceConfiglist[j].paramCode.supCode.codeName
            msg11.select1val =
              ts.d.devicelist[i].deviceConfiglist[j].paramCode.supCode.codeId

            msg11.select2 =
              ts.d.devicelist[i].deviceConfiglist[j].paramCode.codeName
            msg11.select2val =
              ts.d.devicelist[i].deviceConfiglist[j].paramCode.codeId

            msg11.limitLow = ts.d.devicelist[i].deviceConfiglist[j].limitLow
            msg11.limitTop = ts.d.devicelist[i].deviceConfiglist[j].limitTop

            a.msg.msg11.push(msg11)
          }

          this.SHjiazai.push(a)

          // console.log('88888888888888888', this.SHjiazai)
        }
        this.initsign()

        for (let j = 0; j < ts.d.devicelist.length; j += 1) {
          if (ts.d.devicelist[j].warnDatalist.length > 0) {
            for (let k = 0; k < this.SHjiazai.length; k += 1) {
              if (this.SHjiazai[k].msg.sbbh == ts.d.devicelist[j].deviceId) {
                this.shineicon(
                  this.SHjiazai[k].signid,
                  this.SHjiazai[k].msg.sbname
                )
              }
            }
          }
        }
      })
    },
    shineicon(warndot, name) {
      console.log(name, '213232')

      var slik = $('.signdot')
      var j = 0
      var imgi = ['url(../img/bj1.png)', 'url(../img/bj.png)']
      var a = $(".signdot[data-signid='" + warndot + "']")
      setInterval(function() {
        j++
        j = j % 2
        a.css('background', imgi[j])
        a.css('background-size', '100%')
      }, 500)
    },
    changeurlimg() {
      for (let i = 0; i < this.SHjiazai.length; i += 1) {
        if (this.warningdot == this.SHjiazai[i].msg.sbbh) {
          this.shineicon(this.SHjiazai[i].signid)
        }
      }
    },
    //标记部分
    output(msg) {
      $('.eventoutput').append('<p>' + msg + '</p>')
    },
    clearoutput() {
      $('.eventoutput').html('')
    },
    initsign() {
      var sign = $('#div_picsign').picsign({
        picurl: this.src,
        signdata: this.SHjiazai,
        editable: {
          //是否可编辑
          add: false, //是否可添加
          update: false, //是否可修改
          del: false, //是否可删除
          move: false //是否可移动
        },
        popwidth: 510,
        popheight: 200,
        inputwidth: 510,
        inputheight: 247,
        beforeadd: data => {
          this.output('【beforeadd】:' + JSON.stringify(data))
        },
        onadd: data => {
          this.output('【onadd】:' + JSON.stringify(data))
        },
        beforeupdate: data => {
          this.output('【beforeupdate】:' + JSON.stringify(data))
        },
        onupdate: data => {
          this.output('【onupdate】:' + JSON.stringify(data))
        },
        beforedel: data => {
          this.output('【beforedel】:' + JSON.stringify(data))
        },
        ondel: data => {
          this.output('【ondel】:' + JSON.stringify(data))
        }
      })
      if (sign) {
        console.log(this.SHjiazai, '9999')

        for (let i = 0; i < this.SHjiazai.length; i += 1) {
          $(
            "<span style='color:#fff;text-align:center;display:inline-block;margin-top:23px'>" +
              this.SHjiazai[i].msg.sbname +
              '</span>'
          ).appendTo($('.signdot')[i])
        }
        this.output('初始化')
        this.tuozhuai()
        // localStorage.removeItem("imgUrl")
        // this.img=''
        // this.changecolor()
      }
    },
    getsign() {
      var data = $('#div_picsign').picsign('getData')
      if (data) {
        this.output('获取数据:' + JSON.stringify(data))
      }
    },
    wheel(e) {
      //滑轮
      document
        .getElementById('div_picsign')
        .addEventListener('mousewheel', e => {
          var e = e || window.event,
            v = e.wheelDelta || e.detail
          if (v > 0) {
            this.ImageChange(true)
            window.event.returnValue = false
            return false
          } else {
            this.ImageChange(false)
            window.event.returnValue = false
            return false
          }
        })
    },
    ImageChange(args) {
      //放大，缩小

      var oimg = $('.picsignimg')
      var imgW = oimg.width()
      var imgH = oimg.height()
      // console.log(this.zuoce, this.shangce)

      if (args) {
        if (this.zoom < 2) {
          this.zoom += 0.1
          oimg.css({
            width: imgW * 1.1,
            left: -(imgW * 1.1 - this.zuoce) / 2
          })
          oimg.css({
            height: imgH * 1.1,
            top: -(imgH * 1.1 - this.shangce) / 2
          })
        }
      } else {
        if (this.zoom > 1) {
          this.zoom -= 0.1
          oimg.css({
            width: imgW / 1.1,
            left: -(imgW / 1.1 - this.zuoce) / 2
          })
          oimg.css({
            height: imgH / 1.1,
            top: -(imgH / 1.1 - this.shangce) / 2
          })
        }
      }
      return this.zoom
    },
    tuozhuai() {
      var oDiv = $('.picsignimg')
      // console.log(oDiv)
      var flag = false
      var clientX, newX, clientY, newY
      $('.picsign').on('mousedown', function(e) {
        var disX = e.clientX - oDiv.position().left //鼠标相对div X
        var disY = e.clientY - oDiv.position().top //鼠标相对div y

        // console.log(
        //   'mousedown:',
        //   oDiv.offset().left,
        //   e.clientX,
        //   e.clientY,
        //   disX,
        //   disY
        // )

        flag = true
        clientX = e.clientX //鼠标相对浏览器X
        clientY = e.clientY //鼠标相对浏览器y
        document.onmousemove = function(ev) {
          newX = clientX - ev.clientX //鼠标移动的距离x
          newY = clientY - ev.clientY //鼠标移动的距离y
          if (flag) {
            var a = $('.picsignimg')
              .css('left')
              .replace(/px/, '')
            var b = $('.picsignimg')
              .css('top')
              .replace(/px/, '')
            var c = $('.picsignimg')
              .css('right')
              .replace(/px/, '')
            var d = $('.picsignimg')
              .css('bottom')
              .replace(/px/, '')
            // console.log('onmousemove：', ev.clientX, disX)

            if (newX < 0) {
              //向右拖动     //限制拖拽的边距，不能旁边留空
              if (Math.abs(a) > Math.abs(ev.clientX - disX)) {
                //据左边的距离大于拖动的
                oDiv.css({
                  left: ev.clientX - disX > 0 ? 0 : ev.clientX - disX + 'px'
                })
              }
            } else {
              // console.log('left')
              if (
                Math.abs(c) > Math.abs(ev.clientX - oDiv.position().left - disX)
              ) {
                // console.log('left111')
                //据右边的距离大于拖动的
                oDiv.css({
                  left: ev.clientX - disX > 0 ? 0 : ev.clientX - disX + 'px'
                })
              }
            }
            if (newY < 0) {
              //向上拖动
              if (Math.abs(b) > Math.abs(ev.clientY - disY)) {
                //据上边的距离大于拖动的
                oDiv.css({
                  top: ev.clientY - disY > 0 ? 0 : ev.clientY - disY + 'px'
                })
              }
            } else {
              if (Math.abs(c) > Math.abs(ev.clientY - disY)) {
                //据下边的距离大于拖动的
                oDiv.css({
                  top: ev.clientY - disY > 0 ? 0 : ev.clientY - disY + 'px'
                })
              }
            }
          }
        }
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
          flag = false

          // console.log('mouseup')
        }
      })
    },
    toggle() {
      $('#div_picsign').picsign('toggle')
    },
    destroysign() {
      if ($('#div_picsign').picsign('destroy')) {
        this.output('销毁')
        this.img = ''
      }
    },
    changecolor() {
      var ovar = document.getElementsByClassName('signdot')
      setTimeout(function() {
        // console.log(ovar)
        ovar.style.display = 'none'
      }, 800)
    },
    getimglist() {
      const res = {}
      this.spost(this.ts, '/region/getall', res).then(ts => {
        // console.log(ts.d)
        this.imgList = ts.d
        if (this.imgList.length > 0) {
          let picid = this.imgList[0].id
          this.picname = this.imgList[0].regionName
          this.changeselect(picid)
        }
      })
    },
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }
        ]
      })
      myChart2.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }
        ]
      })
      window.onresize = myChart.resize
    }
  }
}
</script>

<style>
.el-cascader-menu,
.el-cascader-menu__item.is-disabled:hover {
  background: #111c3f;
}
.el-cascader-menu__item:focus:not(:active),
.el-cascader-menu__item:hover {
  background: #eaaf4f;
}
.el-cascader-menus {
  background: #111c3f;
  color: #fff;
}
.el-picker-panel {
  background: #111c3f;
  color: #fff;
  border: 1px solid #233a62;
}
.tabletitle {
  font-size: 24px;
  color: #29edff;
  padding: 10px 0;
}
.el-table td,
.el-table th.is-leaf {
  border: 0;
}
.el-input__inner {
  background: rgba(8, 10, 14, 0);
  border: 1px transparent solid;
  border-image: linear-gradient(to bottom right, #2e5873, #111c3f) 1 10;
}
.input_btn {
  padding: 5px 10px;
  background: #00b0f0;
  color: #fff;
  border: none;
  border-radius: 5px;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: initial;
}
label {
  position: relative;
}
/* #div_picsign {
  border: 1px dashed #ccc;
  padding: 20px;
} */
.el-table th,
.el-table tr {
  background: inherit;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(12, 58, 108, 0.4);
}
.choosedpic {
  border: 3px solid #ffae5e;
}
.picsignimg {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  vertical-align: middle;
}
#btn {
  margin-right: 5px;
}

#text {
  color: red;
}
.sbname {
  color: #fff;
  font-size: 24px;
  line-height: 50px;
  margin-top: -50px;
  text-align: center;
}
#btn {
  padding: 10px 18px;
  background: #00b0f0;
  color: #fff;
  border: none;
  font-size: 13px;
  border-radius: 5px;
}
#div_picsign1 {
  width: 100%;
  max-height: 450px;
  position: relative;
  text-align: center;
}
#div_picsign {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 500px;
  cursor: move;
}
.picsign {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;

  z-index: 100;
}
#div_picsign img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
.echarts1 {
  width: 100%;
  height: 500px;
  padding: 30px;
}
.echarts2 {
  width: 100%;
  height: 500px;
  padding: 30px;
}
.imgcontent {
  position: relative;
  background: url('../../static/img/homeshow.png') no-repeat;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  padding: 50px 40px;
  margin: 0 auto;
}
.imgcontent > img {
  margin: 0 auto;
  display: block;
}
.imglist:hover {
  cursor: pointer;
  border: 3px solid #ffae5e;
}
.el-button:focus,
.el-button:hover {
  background: url('../../static/img/btntable3.png') no-repeat;
  background-size: cover;
  border: 0;
  padding: 15px 37px;
  color: #fff;
}
.el-button {
  border: 0;
}
</style>
